<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../../static/img/index/bitbug_favicon.ico}"/>
    <link rel="stylesheet" th:href="@{../../static/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/index/serch.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/user/set.css}"/>
    <script th:src="@{../../static/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <style>
        .navbar-nav a {
            font-size: 15px;
        }

        img {
            height: 150px;
            width: 200px;
        }
    </style>
</head>
<body>
<!--首页头部-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" style="font-size: 30px; font-family:'楷体';">宠物商城</a>
            </li>
            <li>
                <a href="#" th:text="'欢迎您 :'+${session.login_user.getUsername()}"></a>
            </li>
            <li>
                <a th:href="@{'/user/set/'+${session.login_user.getId()}}">个人中心</a>
            </li>
            <li>
                <a th:href="@{/user/logout}">注销</a>
            </li>
        </ul>
    </div>
</nav>
<!--个人信息选项-->
<div class="container infoop">
    <!--用户设置选项:纵向导航栏-->
    <ul class="nav nav-tabs nav-pills nav-stacked col-lg-3">
        <li class="text-center">
            <a href="#order" data-toggle="tab" class="active">订单信息</a>
        </li>
        <li class="text-center">
            <a href="#coll" data-toggle="tab">收藏信息</a>
        </li>
        <li class="text-center">
            <a href="#mdp" data-toggle="tab">管理店铺</a>
        </li>
    </ul>
    <!--表单内容或跳转页面-->
    <ul class="tab-content col-lg-9">
        <!--默认不显示，需有active类-->
        <li id="order" class="tab-pane fade in">
            <ul class="nav nav-tabs nav-top">
                <!--data-toggle="tab"选项卡可以切换-->
                <li class="active">
                    <a href="#dfk" data-toggle="tab">待付款</a>
                </li>
                <li>
                    <a href="#yfk" data-toggle="tab">已付款</a>
                </li>
                <li>
                    <a href="#ysh" data-toggle="tab">已收货</a>
                </li>
            </ul>
            <ul class="tab-content ">
                <br/>
                <li id="dfk" class="active tab-pane fade in">
                    <!--待付款订单-->
                    <div class="panel panel-info" th:each="oder:${oderinfos_0}">
                        <div class="panel-heading">
                            <!--订单时间，订单号-->
                            <p>
                                <span th:text="${#dates.format(oder['cratedate'],'yyyy-MM-dd')}"></span>
                                <span class="pull-right" th:text="'订单号 :'+${oder['id']}"></span>
                            </p>
                        </div>
                        <div class="panel-body">
                            <!--订单图片-->
                            <img th:src="@{'../../static/img/index/product/'+${oder['cover']}+'.jpg'}" alt=""
                                 class="pull-left"/>
                            <!--订单商品名-->
                            <p class="pull-left pro_name">
                                <a href="#" th:text="${oder['proname']}"></a>
                            </p>
                            <p class="pull-left pro_price">
                                ￥ <span th:text="${oder['newprice']}"></span>
                            </p>
                            <p class="pull-left">
                                数量 :<span th:text="${oder['counts']}"></span>
                            </p>
                            <p class="pull-left pro_price">
                                总价 :<span th:text="${oder['totalprice']}"></span> 元
                            </p>
                            <p class="pull-left">
                                <a href="#" class="btn btn-success">支付</a>
                                <br/><br/>
                                <a href="#" class="btn btn-danger">取消</a>
                            </p>
                        </div>
                    </div>
                </li>
                <li id="yfk" class="tab-pane fade">
                    <!--已付款订单-->
                    <div class="panel panel-info" th:each="oder:${oderinfos_1}">
                        <div class="panel-heading">
                            <!--订单时间，订单号-->
                            <p>
                                <span th:text="${#dates.format(oder['paydate'],'yyyy-MM-dd')}"></span>
                                <span class="pull-right" th:text="'订单号 :'+${oder['id']}"></span>
                            </p>
                        </div>
                        <div class="panel-body">
                            <!--订单图片-->
                            <img th:src="@{'../../static/img/index/product/'+${oder['cover']}+'.jpg'}" alt=""
                                 class="pull-left"/>
                            <!--订单商品名-->
                            <p class="pull-left pro_name">
                                <a href="#" th:text="${oder['proname']}"></a>
                            </p>
                            <p class="pull-left pro_price">
                                ￥ <span th:text="${oder['newprice']}"></span>
                            </p>
                            <p class="pull-left">
                                数量 :<span th:text="${oder['counts']}"></span>
                            </p>
                            <p class="pull-left pro_price">
                                总价 :<span th:text="${oder['totalprice']}"></span> 元
                            </p>
                            <p class="pull-left">
                                <a href="#" class="btn btn-success">收货</a>
                                <br/><br/>
                                <a href="#" class="btn btn-danger">退货</a>
                            </p>
                        </div>
                    </div>
                </li>
                <li id="ysh" class="tab-pane fade" th:each="oder:${oderinfos_2}">
                    <!--待已收货订单-->
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <!--订单时间，订单号-->
                            <p>
                                <span th:text="${#dates.format(oder['donedate'],'yyyy-MM-dd')}"></span>
                                <span class="pull-right" th:text="'订单号 :'+${oder['id']}"></span>
                            </p>
                        </div>
                        <div class="panel-body">
                            <!--订单图片-->
                            <img th:src="@{'../../static/img/index/product/'+${oder['cover']}+'.jpg'}" alt=""
                                 class="pull-left"/>
                            <!--订单商品名-->
                            <p class="pull-left pro_name">
                                <a href="#" th:text="${oder['proname']}"></a>
                            </p>
                            <p class="pull-left pro_price">
                                ￥ <span th:text="${oder['newprice']}"></span>
                            </p>
                            <p class="pull-left">
                                数量 :<span th:text="${oder['counts']}"></span>
                            </p>
                            <p class="pull-left pro_price">
                                总价 :<span th:text="${oder['totalprice']}"></span> 元
                            </p>
                            <p class="pull-left">
                                <a href="#" class="btn btn-success">评价</a>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <!--收藏信息：店铺和商品-->
        <li id="coll" class="tab-pane fade in">
            <!--收藏信息-->
            <ul class="nav nav-tabs nav-top">
                <!--data-toggle="tab"选项卡可以切换-->
                <li class="active">
                    <a href="#scdp" data-toggle="tab">收藏店铺</a>
                </li>
                <li>
                    <a href="#scsp" data-toggle="tab">收藏商品</a>
                </li>
            </ul>
            <ul class="tab-content">
                <!--收藏店铺-->
                <li id="scdp" class="tab-pane active fade in" th:each="coll:${collectioninfos_0}">
                    <br/>
                    <div class="thumbnail col-lg-4">
                        <img th:src="@{'../../static/img/index/products/index/'+${coll['storecover']}+'.png'}" alt=""/>
                        <div class="caption">
                            <h3 th:text="${coll['storename']}">骆驼牌羊奶</h3>
                            <p>
                                <a href="#" class="btn btn-block btn-default" th:id="${coll['sidorpid']}">取消收藏</a>
                            </p>
                        </div>
                    </div>

                </li>
                <!--收藏的商品-->
                <li id="scsp" class="tab-pane fade" th:each="coll:${collectioninfos_1}">
                    <br/>
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            <!--订单时间，订单号-->
                            <p>
                                <span th:text="${#dates.format(coll['saletime'],'yyyy-MM-dd')}">2019-1-24</span>
                            </p>
                        </div>
                        <div class="panel-body">
                            <!--订单图片-->
                            <img th:src="@{'../../static/img/index/products/index/'+${coll['cover']}+'.png'}" alt=""
                                 class="pull-left"/>
                            <!--订单商品名-->
                            <p class="pull-left pro_name">
                                <a href="#" th:text="${coll['proname']}">阿凡达释放更多复古风德国和风格化风格化进口衣服</a>
                            </p>
                            <p class="pull-left pro_price">
                                ￥ <span th:text="${coll['newprice']}">99.5</span>
                            </p>
                            <p class="pull-left">
                                <a href="#" class="btn btn-success">看类似</a>
                                <br/><br/>
                                <a href="#" class="btn btn-default">取消收藏</a>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <!--管理店铺-->
        <li id="mdp" class="tab-pane fade">
            <!--开店，关店-->
            <ul class="nav nav-tabs nav-top">
                <li class="active">
                    <a href="#wddp" data-toggle="tab">我的店铺</a>
                </li>
            </ul>
            <ul class="tab-content">
                <br/>
                <li id="#wddp" class="active">
                    <!--新增店铺按钮-->
                    <div><a th:href="@{/go/build}" class="btn btn-default btn-block">新增店铺</a></div>
                    <br/>
                    <div class="thumbnail col-lg-4" th:each="store:${stores}">
                        <img th:src="${store.storeCover}" alt=""/>
                        <div class="caption" th:attr="data_id=${store.id}">
                            <h3 th:text="${store.storeName}">鱼叔的鱼丸马桶</h3>
                            <a th:if="${store.typeId == 0}" href="#" class="btn btn-primary">关店</a>
                            <a th:if="${store.typeId == 1}" href="#" class="btn btn-danger">营业</a>
                            <a th:href="@{'/store/manage/'+${store.id}}" class="btn btn-warning">进入店铺</a>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
